import { Grid } from "antd-mobile";
import {
  ContentOutline,
  UnorderedListOutline,
  UserContactOutline,
  CompassOutline
} from "antd-mobile-icons";
import Address from '../../assets/imgs/address.png'
import Company from '../../assets/imgs/company.png'
import Contact from '../../assets/imgs/contact.png'
import Products from '../../assets/imgs/products.png'
import { useNavigate } from 'react-router-dom';

import "./index.css";

const Cards = () => {
  const navigate = useNavigate();

  const card_list = [
    {
      title: "公司简介",
      icon: <ContentOutline />,
      path: "/company",
      style: {
        "background-image":
          "linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%)",
      },
      img: Company
    },
    {
      title: "产品展示",
      icon: <UnorderedListOutline />,
      path: "/products",
      img: Products
    },
    {
      title: "联系我们",
      icon: <UserContactOutline />,
      path: "/contact",
      img: Contact
    },
    {
      title: "地理位置",
      icon: <CompassOutline />,
      path: "/address",
      img: Address
    }
  ];

  return (
    <div style={{ margin: "12px" }}>
      <Grid columns={2} gap={12}>
        {card_list.map((i) => {
          return (
            <Grid.Item key={i.title}>
              <div
                onClick={() => navigate(i.path)}
                style={{ cursor: 'pointer', height: '100%' }}
              >
                <Card title={i.title} img={i.img} />
              </div>
            </Grid.Item>
          );
        })}
      </Grid>
    </div>
  );
};

const Card = ({ title, img }: { title: string, img: string }) => {
  return (
    <div className="card">
      <div className="card-title">
        {title}
        {/* <div>{icon}</div> */}
      </div>
      <img className="card-img" src={img} alt="" />
    </div>
  );
};

export default Cards;